<template>
  <div class="source">
    <pageHeader :active="2" :bgColor="'#292c4d'"></pageHeader>
    <div class="page-content">
      <div class="mt70 add-source">
        <div
          class="source-img pr"
          @mouseenter="show = true"
          @mouseleave="show = false"
        >
          <img src="../../assets/images/addService.png" alt="" width="100%" />
          <div class="describe">入驻申请</div>
          <div class="modal" v-show="show">
            <div class="join-btn">
              <p class="cfff f16 mb10">提交使用反馈，获取专属服务</p>
              <el-button type="primary" size="small">立即反馈</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="add-box">
        <el-button v-if="isLogin" size="small" @click="add(1)">添加</el-button>
      </div> -->
      <div class="content">
        <div class="naver">
          <div>&nbsp</div>
          <el-button v-if="isLogin" size="small" @click="add(1)"
            >新增</el-button
          >
        </div>
        <div class="main">
          <div class="aside">
            <div class="nav">
              <div class="title">
                <img src="../../assets/images/theme.png" alt="" class="mr10" />
                场景
              </div>
              <div class="nav-list">
                <div
                  v-for="item in sceneList"
                  :key="item.id"
                  class="nav-item"
                  @click="click(item.id)"
                  :class="scene == item.id ? 'active' : ''"
                >
                  <div class="f14">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <div
              class="item pt20"
              v-for="(item, index) in moduleList"
              :key="index"
            >
              <div class="title">
                {{ item.name }}
                <div class="anniu">
                  <span v-if="isLogin" @click="edit(item)"> 编辑 </span>
                  <span v-if="isLogin">|</span>
                  <el-popconfirm
                    v-if="isLogin"
                    @confirm="del(item)"
                    title="是否要删除当前数据？"
                  >
                    <span slot="reference"> 删除 </span>
                  </el-popconfirm>
                </div>
              </div>
              <div class="remark">{{ item.desc }}</div>
              <div class="flex mb10">
                <div>数据主题：{{ item.subjectName }}</div>
                <div class="ml20 mr20">|</div>
                <div>更新频率：{{ item.updateFrequencyName }}</div>
                <div class="ml20 mr20">|</div>
              </div>
              <el-collapse v-model="item.activeNames">
                <el-collapse-item
                  v-if="item.fileList"
                  title="数据模板"
                  name="1"
                >
                <div class="fileList" v-for="ite in item.fileList" :key='ite.id'>
                  <div style="color: blue;margin-right: 38px;">{{ ite.name}}</div>
                  <div v-if="isLogin" style="cursor: pointer;color: blue;margin-right: 12px;" @click="openImg(ite.url)">预览</div>
                  <div v-if="isLogin" style="cursor: pointer;color: blue;" @click="download(ite.url)">下载模板</div>
                </div>
                
                </el-collapse-item>
              </el-collapse>
              <div class="pb20 flex j-between a-center bb1">
                <div>
                  <el-tag class="mr10" effect="dark" size="mini">{{
                    getTagName(item.sceneId)
                  }}</el-tag>
                  <el-tag class="mr10" effect="dark" size="mini">{{
                    item.dataLevelName
                  }}</el-tag>
                  <el-tag class="mr10" effect="dark" size="mini">{{
                    item.openConditionName
                  }}</el-tag>
                </div>
                <div class="flex">
                  <div class="mr20">更新时间：{{ item.updateTime }}</div>
                  <div>发布时间：{{ item.createTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pageFooter></pageFooter>
    <el-dialog
      :title="isAdd == 1 ? '添加数据' : '编辑数据'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      class="dialog-box"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="标题" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="所属场景" prop="sceneId">
          <el-select v-model="form.sceneId" placeholder="请选择" clearable>
                <el-option
                  v-for="item in actSceneList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
        </el-form-item>

        <el-form-item label="更新频率" prop="updateFrequency">
          <el-select
            v-model="form.updateFrequency"
            placeholder="请选择更新频率"
          >
            <el-option label="每天" :value="1"></el-option>
            <el-option label="每月" :value="2"></el-option>
            <el-option label="每周" :value="3"></el-option>
            <el-option label="每年" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="安全等级" prop="dataLevel">
          <el-select v-model="form.dataLevel" placeholder="请选择数据安全等级">
            <el-option label="1级" :value="1"></el-option>
            <el-option label="2级" :value="2"></el-option>
            <el-option label="3级" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开放条件" prop="openCondition">
          <el-select
            v-model="form.openCondition"
            placeholder="请选择数据安全等级"
          >
            <el-option label="无条件开放" :value="1"></el-option>
            <el-option label="需申请使用" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>

        <el-form-item label="上传模板">
          <el-upload
            class="upload-demo"
            action=""
            multiple
            :auto-upload="false"
            :on-change="handleChange1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pageHeader from '@/components/pageHeader.vue'
import pageFooter from '@/components/pageFooter.vue'
import uploadFile from '@/components/uploadFile.vue'
import {
  scene,
  getOpenData,
  saveOpenData,
  updateOpenData,
  delOpenData,
  uplodeImg,
  preview
} from '@/api/sceneProduct' //api接口
// import {
//   getPwDataDirectory,
//   addPwDataDirectory,
//   editPwDataDirectory,
//   delPwDataDirectory
// } from '@/api/dataSource' //api接口
import { mapGetters } from 'vuex'

export default {
  name: 'DataSource',
  computed: {
    // 获取状态管路设置的值
    ...mapGetters(['isLogin'])
  },
  data() {
    return {
      dialogFormVisible: false,
      moduleList: [],
      form: {},
      fileList1: [],
      fileListUp1: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入标题名称',
            trigger: 'blur'
          }
        ],
        openCondition: [
          {
            required: true,
            message: '请选择开放条件',
            trigger: 'blur'
          }
        ],
        sceneId: [
          {
            required: true,
            message: '请选择所属场景',
            trigger: 'blur'
          }
        ],
        updateFrequency: [
          {
            required: true,
            message: '请选择更新频率',
            trigger: 'blur'
          }
        ],
        dataLevel: [
          {
            required: true,
            message: '请选择数据安全等级',
            trigger: 'blur'
          }
        ],
        desc: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }
        ]
      },

      list: [],
      show: false,
      theme: 0, // 1-设备，2-生产，3-安全，4-人资，，5-项目
      system: 0, // 1-设备管理部，2-生产运行部，3-HSE，4-办公室
      scene: '',
      sceneList: [],
      origin: '',
      actSceneList: [],
      isAdd: 1, //1添加2编辑
      numbers: {
        sb: 0,
        kh: 0,
        gc: 0,
        xl: 0
      }
    }
  },
  components: { pageHeader, pageFooter },

  created() {
    // this.getList()
    this.origin = window.location.origin
    this.initData()
  },

  methods: {
    getTagName(id) {
      let name = ''
      this.sceneList.forEach((item) => {
        if (item.id == id) {
          name = item.name
        }
      })
      return name
    },
    download(url){
      // window.open(`http://101.132.105.177${url}`)
      console.log(`${this.origin}${url}`);
      window.open(`${this.origin}${url}`)
    },
    openImg(url) {
      preview({ fileUrl: url }).then((res) => {
        let type = url
          .substring(url.lastIndexOf('.') + 1, url.length)
          .toLowerCase()
        let docType = 'application/pdf'
        if (type == 'gif') {
          docType = 'image/gif'
        } else if (type == 'jpeg' || type == 'jpg') {
          docType = 'image/jpeg'
        } else if (type == 'png') {
          docType = 'image/png'
        }
        let binaryData = []
        binaryData.push(res)
        let pdfUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: docType })
        )
        window.open(pdfUrl)
      })
    },
    handleChange1(file, fileList) {
      const formData = new FormData()
      formData.append('files', file.raw)
      uplodeImg(formData).then((res) => {
        if (res.code === 0) {
          this.fileListUp1.push(res.data[0])
          // console.log('file1', this.fileList1);
        }
      })
    },
    handleRemove1(file, fileList) {
      // console.log(file, fileList)
      this.fileList1 = fileList
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form, this.fileListUp1)
          this.form.show = true
          // this.form.sceneId = this.scene
          this.form.fileIds = this.fileListUp1
          if (this.isAdd == '1') {
            // console.log(11)
            saveOpenData(this.form).then((res) => {
              if (res.code === 0) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.getData(this.scene)
              }
            })
          } else {
            // console.log(22)
            if (this.fileList1) {
              this.fileList1.forEach((item) => {
                if (item.id) {
                  this.form.fileIds.push(item.id)
                }
              })
            }
            updateOpenData(this.form, this.form.id).then((res) => {
              if (res.code === 0) {
                this.$message({
                  message: '更新成功',
                  type: 'success'
                })
                this.getData(this.scene)
              }
            })
          }
          this.dialogFormVisible = false
          this.form = {}
          this.fileListUp1 = []
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    edit(item) {
      if (item.fileList) {
        this.fileList1 = item.fileList
      }else{
        this.fileList1 = []
      }

      this.isAdd = 2
      this.dialogFormVisible = true
      this.form = item
    },

    //删除
    del(item) {
      delOpenData(item.id).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData(this.scene)
        }
      })
    },

    add() {
      this.fileListUp1 = []
      this.fileList1 = []
      this.isAdd = 1
      this.dialogFormVisible = true
      this.form = {}
    },

    //是否显示更多
    isShow(index) {
      this.list[index].show = !this.list[index].show
    },

    click(active) {
      this.scene = active
      this.getData(this.scene)
    },
    getData(id) {
      getOpenData({ sceneId: id }).then((res) => {
        if (res.code === 0) {
          this.moduleList = res.data || []
          // console.log('???', this.moduleList)
        }
      })
    },
    initData() {
       scene().then((res) => {
        this.actSceneList = res.data || []
      })
      scene().then((res) => {
        // console.log('场景',res.data)
        this.sceneList = res.data || []
        this.sceneList.unshift({
          id: '',
          name: '全部'
        })
        // this.scene = 0
        this.getData(this.scene)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.source {
  margin-top: 70px;
  .page-content {
    min-height: calc(100vh - 300px);
  }
  .add-source {
    background: url('../../assets/images/recourse.png') no-repeat;
    padding-top: 50px;
    background-size: 100% 300px;
    height: 200px;
    overflow: hidden;
    min-width: 1200px;
    .source-img {
      width: 50%;
      margin: 0 auto;
      padding: 15px;
      background: #fff;
      height: 100%;
      .describe {
        position: absolute;
        top: 150px;
        right: 40px;
        font-size: 18px;
        color: #fff;
      }
      .modal {
        position: absolute;
        top: 15px;
        left: 15px;
        bottom: 15px;
        right: 15px;
        background: rgba(51, 51, 51, 0.7);
      }
      .join-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .add-box {
    width: 1200px;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    text-align: right;
  }

  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;
    flex-direction: column;
    .header {
      margin: 10px 0 -10px 229px;
      display: flex;
      justify-content: start;
    }
    .naver {
      display: flex;
      justify-content: space-between;
      margin: 6px 0 10px 229px;
    }
    .main {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 50px;
      .aside {
        width: 200px;
        margin-right: 30px;
        .nav {
          background: #efeff4;
          text-align: left;
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
          .title {
            height: 45px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            background: #292c4d;
            color: #fff;
            font-size: 16px;
          }
          .nav-list {
            .nav-item {
              padding: 0 20px;
              height: 45px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-left: 4px solid #efeff4;
              transition: all 0.3s;
              cursor: pointer;
              .count {
                padding: 0 10px;
                background: #fff;
                border-radius: 20px;
                color: #57aeeb;
                font-size: 12px;
              }
              &:hover {
                border-left-color: #292c4d;
                color: #292c4d;
                font-weight: bold;
              }
              &:hover .count {
                background: #efeff4;
                color: #292c4d !important;
                font-weight: bold;
              }
            }
            .active {
              background: #d6e1f2;
              border-left-color: #292c4d !important;
              color: #292c4d !important;
              font-weight: bold !important;
              .count {
                background: #efeff4 !important;
                color: #292c4d !important;
                font-weight: bold !important;
              }
            }
          }
        }
      }
      .list {
        background: rgb(242, 247, 251);
        padding: 15px 0;
        flex: 1;
        .item {
          text-align: left;
          padding: 0 20px;
          .title {
            font-size: 16px;
            margin-bottom: 10px;
            font-weight: 600;


            .anniu {
              float: right;
              font-size: 12px;
              color: #0a6cff;

              span {
                cursor: pointer;
              }
            }
          }
          .remark {
            font-size: 12px;
            margin-bottom: 15px;
          }
          .bb1 {
            border-bottom: 1px dotted #d6e1f2;
          }
          &:hover {
            // color: #0a6cff !important;
            border: 1px solid #0a6cff;
            // background: #fff;
          }
        }
      }
    }
  }

  .dialog-box {
    text-align: left;

    .el-form-item {
      // width: 300px;
      // .el-form-item__content {
      //   width: 100%;
      // }
    }

    .el-select {
      width: 100%;
    }
  }
  .fileList{
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
</style>
<style>
.el-collapse {
  border: none;
  margin-bottom: 12px;
}
.el-collapse-item__header {
  display: contents;
    align-items: center;
    height: 22px;
    line-height: 22px;
    background-color: #FFF;
    /* color: #303133; */
    cursor: pointer;
    border-bottom: 1px solid #EBEEF5;
    font-size: 13px;
    font-weight: 500;
    transition: border-bottom-color .3s;
    outline: 0;
}
.el-collapse-item__content {
  background-color: #F2F7FB;
}
</style>
